export function observeFCP() {
    const entryHandler = (list) => {
        for (const entry of list.getEntries()) {
            if (entry.name === 'first-contentful-paint') {
                observer.disconnect();
                const json = entry.toJSON();
                console.log(json);
                const reportData = {
                    ...json,
                    type: 'performance',
                    subType: entry.name,
                    pageUrl: window.location.href,
                };
                // 发送数据
            }
        }
    };
    // 统计和计算fcp时间
    const observer = new PerformanceObserver(entryHandler);
    observer.observe({
        type: 'paint',
        buffered: true,
    });
}

export function observeFP() {
    // 检测白屏时间，fp
    const entryHandler = (list) => {
        for (const entry of list.getEntries()) {
            if (entry.name === 'first-paint') {
                observer.disconnect();
                console.log(entry);
                console.log(entry.toJSON());
                // startTime 即白屏时间
                const fpTime = entry.startTime;
                console.log('fpTime: ', fpTime);
                const reportData = {
                    ...json,
                    type: 'performance',
                    subType: entry.name,
                    pageUrl: window.location.href,
                };
                // 发送数据
            }
        }
    };
    const observer = new PerformanceObserver(entryHandler);
    // buffered 表示是否观察缓存数据，即观察代码添加时机比事件出发时机晚也没关系
    observer.observe({ type: 'paint', buffered: true });
}

export function observeLCP() {
    const entryHandler = (list) => {
        if (observer) {
            observer.disconnect();
        }
        for (const entry of list.getEntries()) {
            const json = entry.toJSON();
            console.log(json);
            const reportData = {
                ...json,
                type: 'performance',
                subType: entry.name,
                pageUrl: window.location.href,
            };
            // 发送数据
        }
    };
    const observer = new PerformanceObserver(entryHandler);
    observer.observe({
        type: 'largest-contentful-paint',
        buffered: true,
    });
}

// 资源加载
export function observeResource() {
    const entryHandler = (list) => {
        const data = list.getEntries();
        for (let entry of data) {
            if (observer) {
                observer.disconnect();
            }
            const reportData = {
                name: entry.name,
                type: 'performance',
                subType: entry.entryType, // 类型
                sourceType: entry.initiatorType, // 资源类型
                dns: entry.domainLookupStart - entry.connectStart, // dns耗时
                tcp: entry.connectEnd - entry.connectStart, // tcp耗时
                redirect: entry.redirectEnd - entry.redirectStart, // 重定向耗时
                ttfb: entry.responseStart, // 首字节时间
                protocol: entry.nextHopProtocol, // 协议
                // ...
            };
            console.log(reportData);
        }
    };
    const observer = new PerformanceObserver(entryHandler);
    observer.observe({ type: ['resource'], buffered: true });
}
